<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-loading="loading" label="通知" name="noti">
        <div v-if="notiList.length > 0" class="noti-wrap">
          <div class="box-wrap" v-for="(item, index) in notiList" :key="index">
            <el-divider v-if="index != 0"></el-divider>
            <div v-if="item.type == 1" class="content">
              <span @click="toUser(item.userId)">{{ item.userName }}</span>
              关注了您的 <span @click="toScholar(item.scholarId)">{{ item.scholarName }}</span> 门户。
            </div>
            <div v-if="item.type == 2" class="content">
              您对
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              学者的申诉已被通过，并且已解除了该学者与用户间的绑定关系。
            </div>
            <div v-if="item.type == 3" class="content">
              您的
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              学者门户已被申诉成功，并且已解除了您与该学者的绑定关系。
            </div>
            <div v-if="item.type == 4" class="content">
              您对
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              学者的申诉已被驳回。
            </div>
            <div v-if="item.type == 5" class="content">
              您已成功认领
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              学者门户！
            </div>
            <div v-if="item.type == 6" class="content">
              您认领
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              学者门户失败。
            </div>
            <div v-if="item.type == 7" class="content">
              您对
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》
              </span>
              作者
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              的申诉已被通过，并且已解除了该学者与该学术成果的绑定关系。
            </div>
            <div v-if="item.type == 8" class="content">
              您
              <span @click="toScholar(item.scholarId)">{{
                item.scholarName
              }}</span>
              学者门户下的
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》</span
              >
              已被申诉成功，并且已解除了您与该学术成果的绑定关系。
            </div>
            <div v-if="item.type == 9" class="content">
              您对
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》</span
              >
              作者
              <span @click="toScholar(item.scholarId)">
                {{ item.scholarName }}
              </span>
              的申诉已被驳回。
            </div>
            <div v-if="item.type == 10" class="content">
              <span @click="toUser(item.userId)">{{ item.userName }}</span>
              评论了您的
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》 </span
              >。
            </div>
            <div v-if="item.type == 11" class="content">
              <span @click="toUser(item.userId)">{{ item.userName }}</span>
              回复了您在
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》 </span
              >上的评论。
            </div>
            <div v-if="item.type == 12" class="content">
              您在
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》</span
              >上的评论已被举报，被禁言3天。
            </div>
            <div v-if="item.type == 13" class="content">
              您举报
              <span @click="toUser(item.userId)">{{ item.userName }}</span>
              在
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》</span
              >上的评论已被通过，并已给予相应的惩罚。
            </div>
            <div v-if="item.type == 14" class="content">
              您举报
              <span @click="toUser(item.userId)">{{ item.userName }}</span>
              在
              <span @click="toPaper(item.paperId)"
                >《{{ item.paperName }}》</span
              >上的评论已被驳回。
            </div>
            <div class="time">
              {{ dateStr(item.createdAt) }}
            </div>
          </div>
        </div>
        <div v-else class="no-noti-wrap">您暂时没有任何通知。</div>
      </el-tab-pane>
      <el-tab-pane v-loading="loading" label="私信" name="message">
        <div v-if="messageList.length > 0" class="message-out-wrap">
          <div
            class="message-wrap"
            v-for="item in messageList"
            :key="item.id"
            @click="pushroute(item.id, item.targetId)"
          >
            <el-badge
              v-if="item.unread > 0"
              :value="item.unread"
              class="avatar-badge"
            >
              <el-avatar :size="70" :src="item.imgUrl"></el-avatar>
            </el-badge>
            <el-avatar v-else :size="70" :src="item.imgUrl"></el-avatar>
            <div class="name-title-wrap">
              <div class="name">{{ item.targetName }}</div>
              <div class="content">{{ item.lastMessageContent }}</div>
            </div>
            <div class="time">
              {{ dateStr(item.lastMessageTime) }}
            </div>
          </div>
        </div>
        <div v-else class="no-message-out-wrap">您还未和任何用户聊天哦！</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      loading: true,
      activeName: "noti",
      //     notification里面的type
      //      TYPE = (
      //      (0, '无'),
      //      (1, '关注'),
      //      (2, '申诉学者接受-给用户'),
      //      (3, '申诉学者接受-给学者'),
      //      (4, '申诉学者驳回'),
      //      (5, '门户认领成功'),
      //      (6, '门户认领失败'),
      //      (7, '申诉学术成果接受-给用户'),
      //      (8, '申诉学术成果接受-给学者'),
      //      (9, '申诉学术成果失败'),
      //      (10, '评论'),
      //      (11, '回复评论'),
      //      (12, '举报评论成功-给被禁的用户'),
      //      (13, '举报评论成功-给举报的用户'),
      //      (14, '举报评论驳回'),
      //     )
      notiList: [],
      messageList: [
        {
          fromId: "265a56ba48896e123f",
          from: "钟离",
          imgUrl:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHxG7WGeczxuJ5gospj2LrJK6Vow0CKGY1JA&usqp=CAU",
          notiCount: 3,
          lastTime: "2022-12-6 00:25",
          title: "这是一个标题",
          content:
            "这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容",
        },
        {
          fromId: "567d56ba4a458e123f",
          from: "七七",
          imgUrl: "https://i03piccdn.sogoucdn.com/8cbb744dfb495b7f",
          notiCount: 1,
          lastTime: "2022-12-03 12:42",
          title: "这是一个标题",
          content: "这是个内容这是个内容!!",
        },
        {
          fromId: "567d56ba4a458e123f",
          from: "胡桃",
          imgUrl:
            "https://img.win3000.com/m00/99/c1/3b50c573ea5690b2e5d711ecc2c77128.jpg",
          notiCount: 0,
          lastTime: "2022-11-10 17:05",
          title: "这是一个标题",
          content:
            "这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容这是个内容",
        },
      ],
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    toPaper(id) {
      console.log(id);
      // 跳转学术成果
      this.$router.push({ path: `/paperInfo/${id}` });
    },
    toScholar(id) {
      console.log(id);
      // 跳转学者主页
      this.$router.push("/scholarprofile/" + id);
    },
    toUser(id) {
      console.log(id);
      // 跳转用户主页
      this.$router.push("/userprofile/"+id)
    },
    pushroute(id, targetid) {
      console.log(id);
      // 跳转聊天框
      this.$router.push({
        name: "privatemessage",
        params: { chatboxid: id, targetid: targetid },
      });
    },
    dateStr(date) {
      date = new Date(date).getTime();
      var time = new Date().getTime();
      time = parseInt((time - date) / 1000);
      var s;
      if (time < 60 * 10) {
        return "刚刚";
      } else if (time < 60 * 60) {
        s = Math.floor(time / 60);
        return s + "分钟前";
      } else if (time < 60 * 60 * 24) {
        s = Math.floor(time / 60 / 60);
        return s + "小时前";
      } else if (time < 60 * 60 * 24 * 5) {
        s = Math.floor(time / 60 / 60 / 24);
        return s + "天前";
      } else {
        date = new Date(parseInt(date));
        let y = date.getFullYear();
        let m =
          date.getMonth() < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        let d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let mn =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        return y + "-" + m + "-" + d + " " + h + ":" + mn;
      }
    },
    async getAll() {
      await this.getNotification();
      await this.getMessage();
      for (let i = 0; i < this.messageList.length; i++) {
        if (this.messageList[i].lastMessageContent === null)
          this.messageList.splice(i, 1);
      }
      this.loading = false;
    },
    async getNotification() {
      await this.$axios({
        method: "get",
        url: "/api/getNotification",
      }).then((res) => {
        this.notiList = res.data.data;
        console.log(this.notiList);
      });
    },
    async getMessage() {
      await this.$axios({
        method: "get",
        url: "/api/getChatBoxList",
      }).then((res) => {
        this.messageList = res.data.data;
        var i;
        for(i=0;i<this.messageList.length;i++)
        {
          this.messageList[i].imgUrl='http://120.46.205.87'+this.messageList[i].imgUrl;
        }
        console.log(this.messageList);
      });
    },
    handleClick(tab) {
      console.log(tab.index);
    },
  },
};
</script>
<style scoped>
.noti-wrap .time {
  display: inline-block;
  width: 150px;
  color: #aaaaaa;
  text-align: end;
  vertical-align: middle;
  font-size: 14px;
}
.noti-wrap span {
  color: #3d3daf;
  font-weight: 600;
  cursor: pointer;
}
.noti-wrap .content {
  display: inline-block;
  width: 745px;
  padding: 0 10px;
  /* outline: 1px red solid; */
}
.noti-wrap .el-divider {
  margin: 20px 0;
}
.noti-wrap {
  padding: 10px 0;
}
.no-noti-wrap,
.no-message-out-wrap {
  padding: 20px 0;
  text-align: center;
  color: #aaaaaa;
}

.message-wrap .time {
  display: inline-block;
  width: 100px;
  color: #aaaaaa;
  text-align: end;
  vertical-align: middle;
  font-size: 14px;
}
.message-wrap .content {
  width: 600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.message-wrap .name {
  font-weight: 600;
}
.message-wrap .name-title-wrap {
  display: inline-block;
  width: 680px;
  margin: 0 0 0 20px;
  vertical-align: middle;
  /* outline: 1px red solid; */
}
.el-avatar {
  vertical-align: middle;
  /* outline: 1px red solid; */
}
.avatar-badge {
  width: 70px;
  /* outline: 1px red solid; */
}
.message-wrap:hover {
  background-color: #f5f7fa;
  cursor: pointer;
}
.message-wrap {
  /* margin: 0 0 30px 0; */
  padding: 15px 10px;
}

::v-deep .el-tabs__item {
  color: #777777;
  font-weight: 600;
  font-size: 18px;
  height: 45px;
  width: 80px;
  text-align: center;
}
::v-deep .el-tabs__item.is-active {
  color: #778dff;
}
::v-deep .el-tabs__item:hover {
  color: #778dff;
  cursor: pointer;
}
::v-deep .el-tabs__active-bar {
  background-color: #778dff;
  width: 80px;
  height: 3px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 3px;
}
</style>